﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavascriptGame.aspx.cs" Inherits="JavascriptGame" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>
    <script src="script/jquery-1.6.2.js" type="text/javascript"></script>
    <style type="text/css">
        .cell
        {
            width: 40px;
            height: 40px;
            float: left;
            cursor: pointer;
        }
        .border
        {
            border: 1px solid black;
        }
        
        .noborder
        {
            border: 1px solid white;
        }        
        
        .selected
        {
            border: 1px solid blue;
        }
        .clear
        {
            clear: none;
        }
        .row
        {
            width: 100%;
            height: 42px;
        }
    </style>
    <script type="text/javascript">
        //单元格对象
        function Cell() {
            this.imgSrc = "";

            this.xAxis = 0;

            this.yAxis = 0;

            this.htmlMode = "default";
            this.html = "";

            this.clearHtml = function () {
                this.htmlMode = "blank";
            }

            this.getHtml = function () {
                switch (this.htmlMode) {
                    case "blank":
                        this.html = "<div class=\"cell noborder\"></div>"
                        break;
                    case "default":
                        this.html = "<div class=\"cell border\" xAxis=\"" + this.xAxis + "\" yAxis=\"" + this.yAxis + "\">" +
                                "<img src=\"" + this.imgSrc + "\"/></div>";
                        break;
                }
                return this.html;
            }
        }

        //清除单元格对象
        function ClearCell() {
            this.html = "<div class=\"clear\"></div>";
        }

        var singleton = function () {
            var width = 4;
            var height = 4;
            var nSelected = 0;
            var imgsSrc = ["img/001.jpg", "img/002.jpg", "img/003.jpg", "img/004.jpg", "img/005.jpg",
                         "img/006.jpg", "img/007.jpg", "img/008.jpg", "img/009.jpg", "img/010.jpg"];

            //构造二维数组方块对象
            var array;

            //只存放两个元素的队列
            var twoEleQueue = new Array();
            //比较并且处理队列
            var compareAndHandle = function () {
                if (twoEleQueue.length != 2) {
                    return;
                }
                var ele1 = twoEleQueue[0];
                var ele2 = twoEleQueue[1];
                if (ele1.imgSrc == ele2.imgSrc) {
                    ele1.clearHtml();
                    ele2.clearHtml();
                    render();
                    //清空队列
                    twoEleQueue.shift();
                    twoEleQueue.shift();
                }
            }
            var containerID;
            var render = function () {
                if (containerID == "" || containerID == undefined || containerID == null) {
                    alert("呈现失败，请设置containerID");
                    return;
                }
                $("#" + containerID).html("");
                var k = 0;
                var html = "";
                for (var j = 0; j < height; j++) {
                    html += "<div class=\"row\">";
                    for (var i = 0; i < width; i++) {
                        html += array[j][i].getHtml();
                    }
                    html += new ClearCell().html;
                    html += "</div>";
                }
                $("#" + containerID).append(html);

                $("div.cell").mousedown(function () {
                    $("div").removeClass("selected")
                    $(this).addClass("selected");
                    click($(this).attr("xAxis"), $(this).attr("yAxis"));
                });
            }

            var Rand = function (start, end) {
                start = start - 1;
                var res = Math.ceil(start + (end - start) * Math.random());
                return res;
            }

            var disorder = function (arr) {
                var length = arr.length;
                for (var i = 0; i < length; i++) {
                    var rand = Rand(0, length - 1);
                    //switch
                    var tmp = arr[i];
                    arr[i] = arr[rand];
                    arr[rand] = tmp;
                }
                return arr;
            }

            var click = function (x, y) {
                if (x == undefined || y == undefined) {
                    return;
                }
                switch (twoEleQueue.length) {
                    case 0:
                        twoEleQueue.push(array[x][y]);
                        break;
                    case 1:
                        if (twoEleQueue[0].xAxis == x && twoEleQueue[0].yAxis == y)
                            return;
                        twoEleQueue.push(array[x][y]);
                        compareAndHandle();
                        break;
                    case 2:
                        if (twoEleQueue[1].xAxis == x && twoEleQueue[1].yAxis == y)
                            return;
                        twoEleQueue.shift();
                        twoEleQueue.push(array[x][y]);
                        compareAndHandle();
                        break;
                }
            }

            return {
                //初始化
                set: function (x, y) {
                    if (x * y % 2 != 0) {
                        alert("请输入偶数！");
                        return;
                    }
                    width = x;
                    height = y;
                    // 得到最多的图片数
                    var maxPicCount = 0;

                    for (var i = imgsSrc.length; i > 0; i--) {
                        if ((x * y) % (2 * i) == 0) {
                            maxPicCount = i;
                            break;
                        }
                    }
                    if (maxPicCount <= 1) {
                        alert("初始化有错误");
                    }

                    //得到一个随机的pic元素
                    var picArray = new Array(x * y);
                    for (var j = 0; j < x; j++) {
                        for (var i = 0; i < y; i++) {
                            picArray[i + j * y] = i;
                        }
                    }
                    disorder(picArray);
                    //初始化
                    array = new Array(x);
                    for (var i = 0; i < x; i++) {
                        array[i] = new Array(y);
                    }
                    var count = 0;
                    for (var j = 0; j < x; j++) {
                        for (var i = 0; i < y; i++) {
                            array[j][i] = new Cell();
                            array[j][i].xAxis = j;
                            array[j][i].yAxis = i;
                            array[j][i].imgSrc = imgsSrc[picArray[count]];
                            count++;
                        }
                    }
                },
                initGame: function () {
                    containerID = "main";
                    render();
                    //alert(array[3][2]);
                }
            }
        } ();
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="main" style="width: 800; height: 400px">
        <div style="width: 500px; height: 270px" class="tableCenterBodyDiv">
            <div id='xx' style="width: 100%; border: 1px solid red; overflow: auto;">
                <div style="float: left; width: 130px; height: 80px; border: 1px solid blue;">
                    TEST DIV</div>
                <div style="float: left; width: 130px; height: 80px; border: 1px solid blue;">
                    TEST DIV</div>
                <div style="float: left; width: 130px; height: 80px; border: 1px solid blue;">
                    TEST DIV</div>
                <div style="float: left; width: 130px; height: 80px; border: 1px solid blue;">
                    TEST DIV</div>
                <div style="float: left; width: 130px; height: 80px; border: 1px solid blue;">
                    TEST DIV</div>
                <div style="clear: both;">
                </div>
            </div>
        </div>
    </div>
    </form>
</body>
</html>
<script type="text/javascript">
    $(function () {
        singleton.set(8, 8);
        singleton.initGame();
    });
</script>
